<template>
    <div>
        <!-- 标题 如果选择题模块数据的长度为零,那么久不显示选择题模块的大标题 -->
        <span class="qusetion_big_title" v-if="judgeQuestions.length>0">
            {{ order +'.&nbsp;&nbsp;'}}判断题:在每小题给出的四个选项中,只有一个选项是符合题目要求的.
        </span>
        <div class="judge" v-for="(item,index) in judgeQuestions" :key="index">
            <p class="qusetion_small_title"> ( {{index+1}} ) [{{ item.score }}分] {{ item.questionDescription }} ( )</p>
            <el-radio-group v-model="item.option">
                <el-radio :label="0"> 错误 </el-radio><br>
                <el-radio :label="1"> 正确 </el-radio><br>
            </el-radio-group>
            <!-- 答案显示 -->
            <div v-if="item.option == '0'">
                <span>你的答案为:</span><span style="color: red; font-size: 20px;">&nbsp; 错误</span>
            </div>
            <div v-else-if="item.option == '1'">
                <span>你的答案为:</span><span style="color: red; font-size: 20px;">&nbsp; 正确</span>
            </div>
        </div>
    </div>
</template>



<script>
    export default {
        // 父组件传过来的id值  表示这套试卷的id，
        props: ['id'],
        data() {
            return {
                order: "二",
                judgeQuestions: [
                    {
                        id: 1,
                        questionNumber: "C-113",
                        questionDescription: "java是面向对象的",
                        score: 5,
                        option: "",// 用户的选项，不需要后端传，但是需要将这个参数传回后端
                    },
                    {
                        id: 2,
                        questionNumber: "C-114",
                        questionDescription: "java是面向对象的",
                        score: 5,
                        option: "",// 用户的选项，不需要后端传，但是需要将这个参数传回后端
                    },
                    {
                        id: 3,
                        questionNumber: "C-115",
                        questionDescription: "java是面向对象的",
                        score: 5,
                        option: "",// 用户的选项，不需要后端传，但是需要将这个参数传回后端
                    },
                ],
            };
        },
        created() {
            console.log("判断题接收的试卷id" + this.id);
            // 利用query的id向后端发送请求，请求题型数据，因为题型分布等关系，分四次请求，分别请求不同题型
        }
    }
</script>



<style lang="less" scoped>
    /* 大标题样式,eg 选择题,填空题这些 */
    .qusetion_big_title {
        font-size: 20px;
    }

    /* 小标题样式 */
    .qusetion_small_title {
        font-size: 18px;
    }
</style>